<!--    两级双联齿轮传动比分配-->
<template>
    <div class="all">
        <a-row class="top_row">
            <a-col span="15" style="height: 100%">
                <div class="top_top">
                    <div class="top_top_left">
                        <div class="top_top_left_top">输入参数</div>
                        <div class="top_top_left_bottom">
                            <div class="top_top_left_bottom_1">
                                <ul class="top_text1">
                                    <li>总传动比</li>
                                    <li>双联第1级行星轮宽径比上限值</li>
                                    <li>双联第2级中心轮宽径比上限值</li>
                                </ul>
                            </div>
                            <div class="top_top_left_bottom_2">
                                <ul class="top_input1">
                                    <li><input v-model="form.R0"/></li>
                                    <li><input v-model="form.B1min"/></li>
                                    <li><input v-model="form.B2min"/></li>
                                </ul>
                            </div>
                            <div class="top_top_left_bottom_3">
                                <ul class="top_text2">
                                    <li>6个行星轮</li>
                                    <li>5个行星轮</li>
                                    <li>4个行星轮</li>
                                    <li>3个行星轮</li>
                                    <li>2个行星轮</li>
                                </ul>
                            </div>
                            <div class="top_top_left_bottom_4">
                                <ul class="top_input2">
                                    <li><div style="height: 100%;height: 100%;padding-top: 2%">不均载系数</div></li>
                                    <li><input v-model="form.bb1"/></li>
                                    <li><input v-model="form.bb2"/></li>
                                    <li><input v-model="form.bb3"/></li>
                                    <li><input v-model="form.bb4"/></li>
                                    <li><input v-model="form.bb5"/></li>
                                </ul>
                            </div>
                            <div class="top_top_left_bottom_5">
                                <ul class="top_input3">
                                    <li style="margin-left: 6%">齿数比限制值<button @click="showModal" style="height: 100%;width: 20%;margin-left: 10%;border-radius: 5px;">!</button></li>
                                    <a-modal title="" :visible="visible" width="620px"
                                             :confirm-loading="confirmLoading"
                                             @ok="handleOk" @cancel="handleCancel">
                                        <img :src="img.img3">
                                    </a-modal>
                                    <li><input v-model="form.aa1"/></li>
                                    <li><input v-model="form.aa2"/></li>
                                    <li><input v-model="form.aa3"/></li>
                                    <li><input v-model="form.aa4"/></li>
                                    <li><input v-model="form.aa5"/></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="top_top_right">
                        <button class="top_button" @click="calculation">计算</button>
                    </div>
                </div>
                <div class="top_bottom">
                 <div class="top_bottom_top">以中心距接近为目标函数</div>
                 <div class="top_bottom_bottom">
                     <div class="middle_table">
                        <table style="width: 100%;height: 20%">
                            <thead style="width: 100%;height: 100%;background: #D7D7D7">
                               <tr class="table_title">
                                   <th>行星轮个数</th>
                                   <th>第1级齿数比</th>
                                   <th>第2级齿数比</th>
                                   <th>总体积表征量</th>
                                   <th>第1级外半径表征量</th>
                                   <th>第2级外半径表征量</th>
                                   <th>第1级行星轮宽径比</th>
                                   <th>第2级中心轮宽径比</th>
                                   <th>第1级与第2级齿宽比</th>
                               </tr>
                            </thead>
                        </table>
                        <table style="width: 100%;height: 80%;">
                            <tr class="table_body" v-for="(item,index) in ans.D_N_s" :key="index">
                                <td>{{item[0]}}</td>
                                <td>{{item[1]}}</td>
                                <td>{{item[2]}}</td>
                                <td>{{item[3]}}</td>
                                <td>{{item[4]}}</td>
                                <td>{{item[5]}}</td>
                                <td>{{item[6]}}</td>
                                <td>{{item[7]}}</td>
                                <td>{{item[8]}}</td>
                            </tr>
                        </table>
                     </div>
                 </div>
                </div>
            </a-col>
            <a-col span="9" style="height: 100%;">
                <img class="left_img" :src="img.img2"/>
            </a-col>
        </a-row>
        <a-row class="bottom_row">
            <a-col span="24" style="height: 100%;">
                <img class="bottom_img" :src="img.img1"/>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import img1 from "@/assets/image/image_54_1.jpg";
    import img2 from "@/assets/image/image_54_2.jpg";
    import img3 from "@/assets/image/image_54_3.jpg";
    import {optiRatio_twoparallel} from "../../../api/file";

    export default {
        name: "OptiRatio_twoparallel_2_6_last",
        created() {
          document.title='两级双联齿轮传动比分配'
          this.$store.state.file.key=51
        },
        data() {
            return{
                visible:false,
                confirmLoading:false,
                img:{
                    img1,
                    img2,
                    img3
                },
               form:this.$store.state.file.dataList[51],
               ans:{
                   D_N_s:[[]],
               }
            };
        },
        methods:{
            showModal(){
                this.visible=true;
            },
            handleOk(){
                this.confirmLoading=true;
                setTimeout(() => {
                        this.visible=false;
                        this.confirmLoading=false;
                    }
                );
            },
            handleCancel(){
                this.visible=false;
            },
            calculation(){
                //这个括号里面可以传参，一般就是传你this.form的内容
                optiRatio_twoparallel(this.form)
                    .then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
                        console.log(res);
                            //然后再把这里面的数据放到你绑定的对象动态改变值即可
                            this.ans.D_N_s = res;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        }
    }
</script>

<style scoped>
.all
{
    width: 100%;
    height: 100%;
    color: #333333;
}
.top_row
{
    width: 100%;
    height: 68%;
}
.bottom_row
{
    width: 100%;
    height: 32%;
}
.top_top
{
    width: 100%;
    height: 42%;
    position: relative;
}
.top_top_left
{
    width: 80%;
    height: 98%;
    position: absolute;
    left: 1%;
    top:2%;
    box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
}
.top_top_left_top
{
    width: 100%;
    height: 10%;
    background: #D7D7D7;
    font-size: 16px;
    font-weight: 500;
}
.top_top_left_bottom
{
    width: 100%;
    height: 90%;
    position: relative;
}
.top_top_left_bottom_1
{
    height: 100%;
    width: 30%;
    position: absolute;
    left: 0;

}
.top_text1
{
    width: 100%;
    height: 100%;
    text-align: right;
    margin-top: 20%;
}
.top_text1 li
{
    width: 100%;
    height: 15%;
}
.top_top_left_bottom_2
{
    height: 100%;
    width: 15%;
    position: absolute;
    left: 30%;

}
.top_input1
{
    width: 100%;
    height: 100%;
    margin-top: 40%;
    margin-left: 10%;
}
.top_input1 li
{
    width: 100%;
    height: 15%;
}
.top_input1 input
{
    width: 70%;
    height: 90%;
}
.top_top_left_bottom_3
{
    height: 100%;
    width: 15%;
    position: absolute;
    left: 45%;

}
.top_text2
{
    height: 100%;
    width: 100%;
    margin-top: 23%;
    text-align: right;
}
.top_text2 li
{
    height: 15%;
    width: 100%;
}
.top_top_left_bottom_4
{
    height: 100%;
    width: 20%;
    position: absolute;
    right: 20%;
}
.top_input2
{
    text-align: center;
    width: 100%;
    height: 100%;
}
.top_input2 li
{
    height: 15%;
    width: 100%;
}
.top_input2 input
{
    height: 90%;
    width: 60%;
}
.top_top_left_bottom_5
{
    height: 100%;
    width: 20%;
    position: absolute;
    right: 0;
}
.top_input3
{
    width: 100%;
    height: 100%;
}
.top_input3 li
{
    height: 15%;
    width: 100%;
}
.top_input3 input
{
    height: 90%;
    width: 60%;
}
.top_top_right
{
    width: 20%;
    height: 100%;
    position: absolute;
    right: 0;
}
.top_button
{
    width: 50%;
    height: 15%;
    margin-top: 70%;
    margin-left: 15%;
    border-radius: 8px;
}

.top_bottom
{
    width: 94%;
    height: 62%;
    margin-top: 1%;
    margin-left: 1%;
    box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
}
.top_bottom_top
{
    width: 100%;
    height: 10%;
    background: #D7D7D7;
    font-weight: 700;
    font-size: 16px;
    padding-top: 0.5%;
}
.top_bottom_bottom
{
    width: 100%;
    height: 89%;
}

.bottom_img
{
    width: 65%;
    height: 85%;
    margin-top: 2%;
    margin-left: 1%;
}
.left_img
{
    width: 80%;
    height: 80%;
    margin-top: 10%;
    margin-left: 10%;
}
.middle_table
{
    width: 96%;
    margin-left: 2%;
    height: 90%;
    margin-top: 1%;
    box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
}
.table_title
{
    width: 100%;
    height: 100%;
    text-align: center;
}
.table_title th
{
    width: 10%;
    border: 1px solid grey;
}
.table_body
{
    width: 100%;
    height: 20%;
    text-align: center;
}
.table_body td
{
    width: 10%;
}
</style>